<template>
  <div class="content">
    <div class="title">
      <b></b>
      <p>天气预报</p>
    </div>
    <div id="weatherChart" class="chart1"></div>
  </div>
</template>

<script>
import * as serviceApi from "../common/service.config";
import Axios from "axios";
import moment from "moment";
export default {
  name: "WeatherChart",
  mounted() {
    let fun = async () => {
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        async: true,
        headers: {
          "content-type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
        data: 'appMsg={"parameter":"{\\"monitorId\\":\\"1\\"}","serviceCode":"queryWeatherInfo","timestamp":"","uuid":""}',
      }).then((res) => {
        console.log(res);
        let ress = JSON.parse(res.data.parameter);
        // 日间天气
        console.log(ress);
        let temperature = [];
        for (let k in ress) {
          if (ress[k].day_air_temperature !== undefined)
            temperature.push(Number(ress[k].day_air_temperature));
        }
        //夜间天气
        let Nightperature = [];
        for (let k in ress) {
          if (ress[k].night_air_temperature !== undefined)
            Nightperature.push(Number(ress[k].night_air_temperature));
        }
        //日期
        let time = [];
        let times = [];
        let newTime = [];
        for (let k in ress) {
          if (ress[k].day !== undefined) {
            time.push(ress[k].day);
          }
        }
        time.forEach((item) => {
          times.push(item.substr(4));
        });
        times.forEach((item) => {
          let arr = item.split("");
          arr.splice(2, 0, "/");
          item = arr.join("");
          newTime.push(item);
        });
        newTime[0] = "今天";
        newTime[1] = "明天";
        newTime[2] = "后天";
        // 图标
        let pic = [];
        for (let k in ress) {
          if (ress[k].day_weather_pic !== undefined) {
            pic.push(ress[k].day_weather_pic);
          }
        }
        //最高温度
        let maxNum = Math.max.apply(null, temperature);
        //最低温度
        let minNum = Math.min.apply(null, Nightperature);
        let myChart = this.$echarts.init(
          document.getElementById("weatherChart")
        );
        myChart.clear();
        myChart.setOption(
          this.yySetWeatherOpt(
            temperature,
            maxNum,
            Nightperature,
            minNum,
            newTime,
            pic
          )
        );
      });
    };
    fun();
  },
  methods: {
    yySetWeatherOpt(temperature, maxNum, Nightperature, minNum, newTime, pic) {
      let option = {
        title: [
          {
            left: "center",
            textStyle: {
              color: "#fff",
              fontWeight: "bold",
              fontSize: "18",
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "10%",
          top: "20%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: newTime,
            axisLine: {
              onZero: false, //解决x轴刻度在数据下面
              lineStyle: {
                color: "rgba(255,255,255,0.5)",
              },
            },
            axisLabel: {
              fontSize: "11",
              color: "#fff",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "(℃)",
            scale: true,
            show: true,
            axisTick: { show: false },
            axisLine: { show: true },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["rgba(255,255,255,0.1)"],
              },
            },
            axisLabel: {
              color: "rgba(255,255,255,0.8)",
              fontSize: "14",
            },
            nameTextStyle: {
              color: "#fff",
            },
          },
        ],
        series: [
          {
            name: "最高温度",
            type: "line",
            itemStyle: {
              normal: {
                color: "#d57628",
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: "14",
                  formatter: function (params) {
                    return `${params.value}°`;
                  },
                },
              },
            },
            data: temperature,
            zlevel: 2,
          },
          {
            name: "最低温度",
            type: "line",
            data: Nightperature,
            itemStyle: {
              normal: {
                color: "#1f6aa5",
              },
            },
            label: {
              show: true,
              position: "top",
              offset: [0, -5],
              formatter: function (value) {
                return `{img${value.dataIndex}|}`;
              },
              rich: {
                img0: {
                  backgroundColor: {
                    image: pic[0],
                  },
                  height: 20,
                },
                img1: {
                  backgroundColor: {
                    image: pic[1],
                  },
                  height: 20,
                },
                img2: {
                  backgroundColor: {
                    image: pic[2],
                  },
                  height: 20,
                },
                img3: {
                  backgroundColor: {
                    image: pic[3],
                  },
                  height: 20,
                },
                img4: {
                  backgroundColor: {
                    image: pic[4],
                  },
                  height: 20,
                },
                img5: {
                  backgroundColor: {
                    image: pic[5],
                  },
                  height: 20,
                },
                img6: {
                  backgroundColor: {
                    image: pic[6],
                  },
                  height: 20,
                },
              },
            },
            zlevel: 4,
          },
        ],
      };
      return option;
    },
  },
};
</script>